<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		
		<style>
			
			#container{
				
				margin-left: 100px;
				width: 600px;
				height: 300px;
				
				background-color: green;
				
				padding-top: 20px;
				/*chrome和firefox浏览器 是 webkit内核的浏览器*/
				-webkit-transform:skew(-20deg);
				
				/*firefox是moz的内核*/
				-moz-transform: skew(-20deg);
				
				-ms-transform:skew(-20deg);
			}
			#top{
				width: 540px;
				height: 110px;
				
				background-color: gray;
				
				border: 1px solid red;
				
				margin-left: 30px;
				
				/*如何把1个行级元素[温柔标签 多个标签会写在1行中]转化为块级元素[霸道标签 每个标签都会单独占1行]*/
				
				display: block;
				
				
			}
			
			#left{
				width: 250px;
				height: 105px;
				
				background-color: gray;
				border: 1px solid blue;
				
				/*行级元素在默认情况下是不能设置宽度和高度的. 如果你需要设置 需要转化*/
				
				display: block;
				
				
				visibility: visible;
				
				/*如果你想要2个块级元素排在1行上 而且有可以设置宽度和高度 左浮动*/
				
				float: left;
				
				margin-left: 30px;
				
				margin-top: 30px;
			}
			
			#right{
				width: 250px;
				height: 105px;
				
				background-color: gray;
				
				float: left;
				
				margin-left: 30px;
				
				margin-top: 30px;
			}
			
			
			
		</style>
	</head>
	<body>
		
		
		<!--less than 小于  lt  greater than gt-->
		
		
		<div id="container">
			
			<span id="top">
				
				&lt;span&gt;&lt;/span&gt;
				
			</span>
			
			<span id="left">
				
				&lt;span&gt;&lt;/span&gt;
			</span>
			
			<div id="right">
				
				&lt;div&gt;&lt;/div&gt;
			</div>
			
		</div>
	</body>
</html>
